<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="layout" content="bolao" />
    <g:set var="entityName" value="${message(code: 'match.label', default: 'Match')}" />
    <title><g:message code="default.edit.label" args="[entityName]" /></title>
  <g:javascript>

    function updateTeam1(e) {
    return updateTeam(e,'team1.id');
    }

    function updateTeam2(e) {
    return updateTeam(e,'team2.id');
    }

    function updateTeam(e,target) {
    var teams = eval("(" + e.responseText + ")"); // evaluate JSON
    if (teams) {
    var tsel = $(target);
    tsel.options.length = 0;
    for (var i=0; i < teams.length; i++) {
    var team = teams[i];
    var opt = document.createElement('option');
    opt.text = team.name;
    opt.value = team.id;
    tsel.options.add(opt);
    }
    }
    }

  </g:javascript>
</head>
<body>
  <div class="body">
    <g:if test="${flash.message}">
      <div class="message">${flash.message}</div>
    </g:if>
    <g:hasErrors bean="${match}">
      <div class="errors">
        <g:renderErrors bean="${match}" as="list" />
      </div>
    </g:hasErrors>
    <g:form method="post" >
      <input type="hidden" name="id" value="${match?.id}" />
      <input type="hidden" name="version" value="${match?.version}" />
      <div class="dialog">
        <fieldset>
            <legend><g:message code="default.edit.label" args="[entityName]" /></legend>
            <table>
              <tbody>
                <tr class="prop">
                  <td valign="top" class="name">
                    <label for="matchNumber"><g:message code="match.matchNumber.label"/>:</label>
                  </td>
                  <td valign="top" class="value ${hasErrors(bean:match,field:'matchNumber','errors')}">${match.matchNumber}</td>
                </tr>
                <tr class="prop">
                  <td valign="top" class="name">
                    <label for="matchDate"><g:message code="match.matchDate.label"/>:</label>
                  </td>
                  <td valign="top" class="value ${hasErrors(bean:match,field:'matchDate','errors')}">
                    <g:datePicker name="matchDate" value="${match?.matchDate}" precision="minute" ></g:datePicker>
                  </td>
                </tr>
                <tr class="prop">
                  <td valign="top" class="name">
                    <label for="venue"><g:message code="match.venue.label"/>:</label>
                  </td>
                  <td valign="top" class="value ${hasErrors(bean:match,field:'venue','errors')}">
                    <input type="text" id="venue" name="venue" value="${fieldValue(bean:match,field:'venue')}"/>
                  </td>
                </tr>
                <tr class="prop">
                  <td valign="top" class="name">
                    <label for="team1"><g:message code="match.team1.label"/>:</label>
                  </td>
                  <td valign="top" class="value ${hasErrors(bean:match,field:'team1','errors')}">
                    <g:select optionKey="id" optionValue="name" name="group1.id" noSelection="${['null':'Todos']}"
                              id="group1.id" from="${mz.matafe.bolao.Group.list()}"
                              value="${match?.team1?.group?.id}"
                              onchange="${remoteFunction(controller:'team',action:'ajaxGetTeams',params: '\'id=\'+ escape(this.value)',onComplete:'updateTeam1(e)')}">
                    </g:select>
                    <g:select style="width: 150px" optionKey="id" optionValue="name" from="${mz.matafe.bolao.Team.list()}" name="team1.id" value="${match?.team1?.id}" ></g:select>
                    </td>
                </tr>
                <tr class="prop">
                  <td valign="top" class="name">
                    <label for="team2"><g:message code="match.team2.label"/>:</label>
                  </td>
                  <td valign="top" class="value ${hasErrors(bean:match,field:'team2','errors')}">
                    <g:select optionKey="id" optionValue="name" name="group2.id" noSelection="${['null':'Todos']}"
                          id="group2.id" from="${mz.matafe.bolao.Group.list()}"
                          value="${match?.team2?.group?.id}"
                          onchange="${remoteFunction(controller:'team',action:'ajaxGetTeams',params: '\'id=\'+ escape(this.value)',onComplete:'updateTeam2(e)')}">
                    </g:select>
                    <g:select style="width: 150px" optionKey="id" optionValue="name" from="${mz.matafe.bolao.Team.list()}" name="team2.id" value="${match?.team2?.id}" ></g:select>
                  </td>
                </tr>
                <tr class="prop">
                  <td valign="top" class="name">
                    <label for="score1"><g:message code="match.score1.label"/>:</label>
                  </td>
                  <td valign="top" class="value ${hasErrors(bean:match,field:'score1','errors')}">
                    <g:textField id="score1" name="score1" size="2" maxlength="2" value="${match?.score1}" />
                  </td>
                </tr>
                <tr class="prop">
                  <td valign="top" class="name">
                    <label for="score2"><g:message code="match.score2.label"/>:</label>
                  </td>
                  <td valign="top" class="value ${hasErrors(bean:match,field:'score2','errors')}">
                    <g:textField id="score2" name="score2" size="2" maxlength="2" value="${match?.score2}" />
                  </td>
                </tr>
              </tbody>
            </table>
        </fieldset>
      </div>
      <div class="buttons">
        <span class="button"><g:actionSubmit class="save" value="${message(code:'global.update')}" action="update" /></span>
        <span class="button"><g:actionSubmit class="delete" action="delete" value="${message(code: 'default.button.delete.label', default: 'Delete')}" onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" /></span>
      </div>
    </g:form>
  </div>
</body>
</html>